* {
    box-sizing: border-box
}

html {
    overflow: hidden
}

body {
    perspective: 2000px;
    background: #000
}

.ring {
    width: 100vw;
    height: 100vh;
    transform-style: preserve-3d
}

.ring img {
    position: absolute;
    width: 300px;
    height: 400px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -200px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: .5;
    transition: .5s
}

.ring img:hover {
    opacity: 1
}

.ring img:nth-child(1) {
    transform: translate3d(0px, 0, 500px) rotateY(180deg)
}

.ring img:nth-child(2) {
    transform: translate3d(293.8926261462px, 0, 404.5084971875px) rotateY(216deg)
}

.ring img:nth-child(3) {
    transform: translate3d(475.5282581476px, 0, 154.5084971875px) rotateY(252deg)
}

.ring img:nth-child(4) {
    transform: translate3d(475.5282581476px, 0, -154.5084971875px) rotateY(288deg)
}

.ring img:nth-child(5) {
    transform: translate3d(293.8926261462px, 0, -404.5084971875px) rotateY(324deg)
}

.ring img:nth-child(6) {
    transform: translate3d(0px, 0, -500px) rotateY(360deg)
}

.ring img:nth-child(7) {
    transform: translate3d(-293.8926261462px, 0, -404.5084971875px) rotateY(396deg)
}

.ring img:nth-child(8) {
    transform: translate3d(-475.5282581476px, 0, -154.5084971875px) rotateY(432deg)
}

.ring img:nth-child(9) {
    transform: translate3d(-475.5282581476px, 0, 154.5084971875px) rotateY(468deg)
}

.ring img:nth-child(10) {
    transform: translate3d(-293.8926261462px, 0, 404.5084971875px) rotateY(504deg)
}